<template>
    <el-container class="container">
        <el-header class="header">
            <NavigationBar />
        </el-header>
        <el-main class="main"><CardFall /></el-main>
    </el-container>
    <FilterDialog />
    <FloatBtn customStyle="bottom: 100px" :onClick="clickFilter">
        <template v-slot>
            <Iconfont name="filter" />
        </template>
    </FloatBtn>
    <FloatBtn :onClick="clickToTop">
        <template v-slot>
            <Iconfont name="caret-up" />
        </template>
    </FloatBtn>
</template>

<script>
    import { defineComponent } from 'vue'
    import NavigationBar from '@/components/core/navigation-bar.vue'
    import CardFall from '@/pages/card-fall/index.vue'
    import FloatBtn from '@/components/core/float-btn.vue'
    import FilterDialog from '@/components/core/filter-dialog.vue'
    import Iconfont from '@/components/core/iconfont.vue'

    export default defineComponent({
        name: 'Index',
        components: {
            Iconfont,
            NavigationBar,
            CardFall,
            FloatBtn,
            FilterDialog,
        },
        setup() {
            function clickFilter() {
                this.$store.commit('filterDialog/setVisible', true)
            }

            function clickToTop() {
                console.log('toTop')
            }

            return {
                clickFilter,
                clickToTop,
            }
        },
    })
</script>

<style scoped lang="less">
    @import url('@/common.less');
    .container {
        .header {
            height: 60px;
            border-bottom: 1px solid #dcdfe6;
        }
        .main {
            height: calc(97vh - 60px);
            // overflow: scroll;
        }
    }
</style>
